<template>
  <div class="container" @viewappear="viewAppear">
    <image class="bg-img" :src="bgImg" resize="cover"></image>
    <navbar title="会员升级" theme="light"></navbar>
    <list
        class="order-list-container"
        @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div class="slogan-container">
          <text class="slogan-icon icon">&#xe629;</text>
          <text class="slogan-text">升级会员，享等级会员专属特权</text>
        </div>
      </cell>
      <cell>
        <div class="main-panel">
          <text class="main-panel-tip">当前会员等级：{{userLevelTitle}}</text>
          <text class="profit-title profit-title-super icon">咪乐族人</text>
          <text class="profit-subtitle">所有会员均有资格升级成为咪乐族人，享族人专属特权</text>
          <div class="profit-list">
            <div class="profit-item">
              <text class="profit-icon icon">&#xe715;</text>
              <text class="profit-text">自买省钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe63d;</text>
              <text class="profit-text">分享赚钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe65f;</text>
              <text class="profit-text">终身族籍</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe689;</text>
              <text class="profit-text">随时提现</text>
            </div>
          </div>
          <div class="profit-upgrade-condition">
            <text class="profit-upgrade-condition-title">升级条件：</text>
            <div class="profit-upgrade-condition-list">
              <text class="profit-upgrade-condition-text">成功分享{{inviteUserNum}}个普通会员</text>
            </div>
          </div>
          <div class="details">
            <text class="details-title text-warning" >规则说明</text>
            <div class="details-item">
              <text class="details-item-num">1.</text>
              <text class="details-item-text">族人自购消费可获得自购省佣金的100%</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">2.</text>
              <text class="details-item-text">族人成功分享商品获得100%自购省佣金作为奖励</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">3.</text>
              <text class="details-item-text">2018年12月31日前升级族人仅需要分享2名会员</text>
            </div>
          </div>
          <text class="profit-title profit-title-super icon">辣小客族长</text>
          <text class="profit-subtitle">所有族人均有资格升级成为辣小客族长，享族长专属特权</text>
          <div class="profit-list">
            <div class="profit-item">
              <text class="profit-icon icon">&#xe715;</text>
              <text class="profit-text">自买省钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe63d;</text>
              <text class="profit-text">分享赚钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe65f;</text>
              <text class="profit-text">终身族长</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe689;</text>
              <text class="profit-text">随时提现</text>
            </div>
          </div>
          <div class="profit-list">
            <div class="profit-item">
              <text class="profit-icon icon">&#xe615;</text>
              <text class="profit-text">双倍佣金</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe9cf;</text>
              <text class="profit-text">专区0元抢</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe8c2;</text>
              <text class="profit-text">团队分红</text>
            </div>
            <div class="profit-item">
            </div>
          </div>
          <div class="profit-upgrade-condition">
            <text class="profit-upgrade-condition-title">升级条件：</text>
            <div class="profit-upgrade-condition-list">
              <text class="profit-upgrade-condition-text">1、分享的会员中有16个咪乐族人</text>
              <text class="profit-upgrade-condition-text">2、缴纳66元系统服务费</text>
            </div>
          </div>
          <div class="details">
            <text class="details-title text-warning" >规则说明</text>
            <div class="details-item">
              <text class="details-item-num">1.</text>
              <text class="details-item-text">族长自购消费可获得自购省佣金的200%</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">2.</text>
              <text class="details-item-text">族长成功分享商品获得自购省佣金的200%</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">3.</text>
              <text class="details-item-text">族长根据团队业绩，会获得相应的团队分红</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">4.</text>
              <text class="details-item-text">族长有0元抢购专区商品的特权</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">5.</text>
              <text class="details-item-text">2018年12月31日前升级的族长，仅需要分享5个咪乐族人，且系统服务费仅收1元钱</text>
            </div>
          </div>
          <text class="profit-title profit-title-super icon">辣小客长老</text>
          <text class="profit-subtitle">优秀的辣小客族长，可申请成为辣小客长老</text>
          <div class="profit-list">
            <div class="profit-item">
              <text class="profit-icon icon">&#xe715;</text>
              <text class="profit-text">自买省钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe63d;</text>
              <text class="profit-text">自购赚钱</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe65f;</text>
              <text class="profit-text">终身长老</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe689;</text>
              <text class="profit-text">随时提现</text>
            </div>
          </div>
          <div class="profit-list">
            <div class="profit-item">
              <text class="profit-icon icon">&#xe630;</text>
              <text class="profit-text">双倍佣金</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe614;</text>
              <text class="profit-text">专区0元抢</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe612;</text>
              <text class="profit-text">团队分红</text>
            </div>
            <div class="profit-item">
              <text class="profit-icon icon">&#xe6bf;</text>
              <text class="profit-text">管理津贴</text>
            </div>
          </div>
          <div class="profit-upgrade-condition">
            <text class="profit-upgrade-condition-title">升级条件：</text>
            <div class="profit-upgrade-condition-list">
              <text class="profit-upgrade-condition-text">具体申请条件需咨询邀请人或客服</text>
            </div>
          </div>
          <div class="details">
            <text class="details-title text-warning" >规则说明</text>
            <div class="details-item">
              <text class="details-item-num">1.</text>
              <text class="details-item-text">长老自购消费可获得自购省佣金的200%</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">2.</text>
              <text class="details-item-text">长老成功分享商品获得自购省佣金的200%</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">3.</text>
              <text class="details-item-text">长老根据团队业绩，会获得相应的团队分红</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">4.</text>
              <text class="details-item-text">长老有0元抢购专区商品的特权</text>
            </div>
            <div class="details-item">
              <text class="details-item-num">5.</text>
              <text class="details-item-text">长老享有管理团队的额外管理津贴</text>
            </div>
          </div>
        </div>
      </cell>
    </list>
    <div class="bottom">
      <div style="flex: 1" v-if="nextUserLevel !==  userLevel">
        <text class="btn btn-primary btn-large" style="flex: 1" @click="upgradeUserLevel()">升级{{nextUserLevelTitle}}</text>
      </div>
      <text class="btn btn-primary btn-large" style="flex: 1" v-if="nextUserLevel == userLevel">您已升级为{{nextUserLevelTitle}}</text>
    </div>
    <wxc-dialog title="温馨提示"
                :content="dialogContent"
                :show="dialogShow"
                :single="false"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
    </wxc-dialog>
    <wxc-loading :show="loadingShow" ></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/table";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }

  .upgrade-duration-select {
    &-row {
      flex-direction: row;
      justify-content: space-between;
      margin: 10px;
    }
    &-option {
      @include border(1px, solid, #ddd);
      border-radius: 10px;
      margin: 0 10px;
      align-items: center;
      justify-content: center;
      height: 100px;
      flex: 1;
      &-select {
        @include border(3px, solid, $brand-warning);
      }
    }
    &-month {
      font-size: 40px;
      line-height: 40px;
      color: $color-muted;
      &-select {
        color: $color-warning;
      }
    }
    &-fee {
      font-size: 24px;
      color: $color-muted;
      &-select {
        color: $color-warning;
      }
    }
  }
  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500px;
  }
  .slogan {
    &-icon {
      font-size: 70px;
      color: #ffdb65;
      font-weight: 100;
    }
    &-container {
      padding: 50px;
      align-items: center;
    }
    &-text {
      font-size: 32px;
      color: #ffdb65;
    }
    &-crown {
      width: 60px;
      height: 40px;
      margin-bottom: 20px;
    }
  }

  .main-panel {
    background-color: #FFFFFF;
    width: 700px;
    margin: 0 25px;
    padding-bottom: 40px;
    margin-bottom: 130px;
    &-tip {
      padding: 20px;
      @include border-bottom(1px, solid, #ddd);
      color: $color;
      font-size: 24px;
      text-align: center;
    }
    &-item {

    }
  }

  .profit {
    &-title {
      font-size: 32px;
      height: 32px;
      line-height: 32px;
      color: $color;
      margin-top: 30px;
      padding-bottom: 10px;
      text-align: center;
      &-super {
        color: $color-warning;
      }
      &-plus {
        color: #454545;
      }
    }
    &-subtitle {
      font-size: 24px;
      height: 24px;
      line-height: 24px;
      color: $color-muted;
      margin-top: 20px;
      padding-bottom: 50px;
      text-align: center;
    }
    &-upgrade-condition {
      padding-top: 10px;
      margin: 10px 60px 10px 60px;
      &-title {
        color: $color-muted;
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 10px;
      }
      &-list {

      }
      &-text {
        color: $color-warning;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 2px;
      }
    }
    &-line {
      @include border-top(1px, solid, #ddd);
      margin: 20px 60px;
    }
    &-list {
      flex-direction: row;
      justify-content: space-between;
      padding: 20px 0;
    }
    &-item {
      flex: 1;
      align-items: center;
    }
    &-icon {
      font-size: 70px;
      color: $color-primary;
    }
    &-icon-plus {
      color: #454545;
    }
    &-text {
      color: $color;
      font-size: 24px;
      &-highlight {
        color: $color-warning;
        font-size: 24px;
      }
    }
    &-help {
      font-size: 20px;
      color: $color-muted;
      &-highlight {
        color: $color-warning;
        font-size: 20px;
      }
    }
  }

  .grid {
    &-td {
      justify-content: center;
      align-items: center;
      height: 150px;
      &-desc {
        flex: 2;
        font-size: 24px;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;
      }
    }
    &-text {
      font-size: 26px;
      color: $color;
    }
  }

  .details {
    padding: 40px 50px;
    margin-top: 20px;
    @include border-bottom(1px, solid, #ddd);
    &-title {
      text-align: center;
      font-size: 28px;
      color: $color;
      margin-bottom: 30px;
    }
    &-item {
      flex-direction: row;
      &-num {
        width: 30px;
        font-size: 26px;
        line-height: 36px;
        color: $color;
      }
      &-text {
        flex: 1;
        font-size: 26px;
        line-height: 32px;
        color: $color;
      }
      margin-bottom: 20px;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    width: 750px;
    align-items: center;
    padding: 20px 50px;
    flex-direction: row;
  }
</style>
<script>

import {WxcDialog, WxcLoading} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')
let config = require('./include/app-config')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    WxcDialog,
    WxcLoading
  },
  data () {
    return {
      crownIcon: 'images/crown.png',
      bgImg: 'images/upgrade-bg.jpg?v=1',
      userUpgradeSetting: {},
      inviteUserNum: 10,
      nextUserUpgrade: {},
      moneyExchangeToIntegral: {},
      loadingShow: false,
      dialogShow: false,
      upgradePayDialogShow: false,
      dialogContent: '',
      userLevel: '',
      userLevelTitle: '',
      nextUserLevel: '',
      nextUserLevelTitle: '',
      timeUnit: 'MONTH',
      levelExpireTime: '',
      payType: 'MONEY',
      payDialogShow: false,
      orderId: 0,
      iosShow: false,
      upgradePanelTitle: '会员升级',
      upgradeFeeList: [],
      directOrderNum: 0
    }
  },
  created () {
    this.crownIcon = urlPath.assets(this.crownIcon)
    this.bgImg = urlPath.assets(this.bgImg)
    config.bindConfig(this)
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.upgradeUserLevel.data().done(rs => {
        let data = rs.data
        // modal.alert({message: JSON.stringify(data)})
        this.userLevel = data.userLevel
        this.userLevelTitle = data.userLevelTitle
        this.nextUserLevel = data.nextUserLevel
        this.nextUserLevelTitle = data.nextUserLevelTitle
        this.userUpgradeSetting = data.userUpgradeSetting
        this.inviteUserNum = data.userUpgradeSetting.plus.inviteUserNum
        this.directOrderNum = data.userUpgradeSetting.plus.directOrderNum
        this.levelExpireTime = data.levelExpireTime
        this.moneyExchangeToIntegral = data.moneyExchangeToIntegral
        this.nextUserUpgrade = data.nextUserUpgrade
        this.upgradePanelTitle = '升级' + data.nextUserLevelTitle
      })
    },
    viewAppear () {
      this.loadData()
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.searchItem(true, () => {
        this.loadingMore = false
      })
    },
    upgradeUserLevel () {
      this.loadingShow = true
      api.user.upgradeUserLevel().done(rs => {
        let data = rs.data
        if (data.success) {
          if (!data.waitPay) {
            this.dialogShow = true
            this.dialogContent = '恭喜您，已成为"' + data.userLevelTitle + '"，现在开始您可以享受到"' + data.userLevelTitle + '"的权益！'
            this.loadData()
          } else {
            this.upgradeFeeList = data.upgradeFeeList
            this.upgradePayDialogShow = true
            // this.payDialogShow = true
            // this.payDialogContent = "订单创建成功，您需要付款以完成订单"
            // this.orderId = data.orderId
          }
        } else {
          this.dialogContent = data.errMsg
          this.dialogShow = true
        }
      }).always(rs => {
        this.loadingShow = false
      })
    },
    createUpgradeUserLevelOrder () {
      this.loadingShow = true
      api.userUpgradeOrder.create({
        timeUnit: this.timeUnit
      }).done(rs => {
        let data = rs.data
        if (data.orderId) {
          navigator.push('order-pay.js?id=' + data.orderId)
        }
      }).always(() => {
        this.upgradePayDialogShow = false
        this.loadingShow = false
      })
    },
    wxcDialogCancelBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.dialogShow = false
    },
    wxcDialogConfirmBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.dialogShow = false
    },
    payDialogCancelBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.payDialogShow = false
    },
    payDialogConfirmBtnClicked () {
      navigator.push('order-pay.js?id=' + this.orderId)
      // 此处必须设置，组件为无状态组件，自己管理
      this.payDialogShow = false
    },
    upgradePayDialogCancelBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.upgradePayDialogShow = false
    },
    upgradePayDialogConfirmBtnClicked () {
      // 此处必须设置，组件为无状态组件，自己管理
      this.createUpgradeUserLevelOrder()
    },
    selectTimeUnit (timeUnit) {
      this.timeUnit = timeUnit
    },
    gotoPay () {
      navigator.push('order-pay.js?id=' + this.orderId)
    }
  }
}
</script>
